<template>
    <el-card>
        <template #header>
            <span>{{ component.formStatus }}设备</span>
        </template>
        <el-form :rules="cameraFormRules" :model="form">
            <template v-for="(item, index) in cameraFields" :key="index">
                <el-form-item :label="item.label" :prop="item.prop" :label-width="item.width" v-if="item.prop !== '_id'">
                    <el-date-picker v-model="form[item.prop]" type="datetime"
                        :placeholder="component.formPlaceholder[item.prop]"
                        v-if="['updatedAt', 'createdAt'].includes(item.prop)" />
                    <el-input v-model="form[item.prop]" :placeholder="component.formPlaceholder[item.prop]"
                        v-else></el-input>
                </el-form-item>
            </template>
            <el-form-item>
                <el-button :type="component.formControl.submit.type" @click="submitForm(formRef)">{{
                    component.formControl.submit.value }}</el-button>
                <el-button :type="component.formControl.reset.type" @click="resetForm(formRef)">{{
                    component.formControl.reset.value }}</el-button>
                <!-- <el-button type="primary" @click="addCamera">添加测试设备</el-button> -->
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script lang="ts" setup>
import { restService } from "@/apis/rest";
import { useCrypto } from "@/hooks/useCrypto";
import { ElMessage } from "element-plus";
import { FormInstance } from "element-plus/es/components/form"
import { computed, ref } from 'vue';
import { useStore } from 'vuex';
const store = useStore();
const formRef = ref<FormInstance>()
const component = computed(() => store.state.admin.cameraManagement.cameraFormComponent);
const cameraFields = computed(() => store.state.admin.cameraManagement.cameraFields);
const cameraFormRules = computed(() => store.state.admin.cameraManagement.cameraFormRules);
const form = computed(() => store.state.admin.cameraManagement.cameraForm);
const submitForm = (formRef: FormInstance | undefined) => {
    store.dispatch('admin/cameraManagement/submitCameraForm',
        { form: form.value, formStatus: component.value.formStatus })
        .then(res => {
            console.log(form.value);
        })
};

const resetForm = (formRef: FormInstance | undefined) => store.commit('admin/cameraManagement/_resetCameraForm');
const addCamera = () => {
    const camera = {
        name: '测试设备' + Math.floor(Math.random() * 1000),
        host: '192.168.0.102',
        port: 80,
        username: 'admin',
        password: 'hyl1027',
        location: '测试设备',
        createdAt: new Date(),
        updatedAt: new Date()
    }
    const { encrypt, decrypt } = useCrypto()
    camera.password = encrypt(camera.password)
    camera.username = encrypt(camera.username)
    camera.host = encrypt(camera.host)
    restService('camera', camera).add().then(res => {
        // res.password = decrypt(res.password)
        // res.username = decrypt(res.username)
        // res.host = decrypt(res.host)
        console.log(res);

        store.state.admin.cameraManagement.cameraList.unshift(res)

        ElMessage.success('添加成功')
    })
}

</script>